<template>
<el-container class="el-container" direction="vertical">
  <el-row style="margin-top: 100px; width: 100%">
    <el-col>
      <i class="el-icon-circle-check pay-ok"></i>
    </el-col>
  </el-row>
  <el-row style="margin-top: 20px; margin-bottom: 200px">
    <el-row>
      <el-col>
        <span>支付完成，请到订单查看支付结果!</span>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col align="center">
        <el-descriptions :column="1" border style="width: 360px">
          <el-descriptions-item label="支付宝交易号">{{this.$route.query.trade_no}}</el-descriptions-item>
          <el-descriptions-item label="订单编号">{{this.$route.query.out_trade_no}}</el-descriptions-item>
          <el-descriptions-item label="支付金额">￥ {{this.$route.query.total_amount}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </el-row>
</el-container>
</template>

<script>
export default {
  name: 'Pay',
  mounted () {
    let _this = this
    // 调用，更新订单状态
    this.$axios({
      url: '/api/tickets/pay/ok',
      method: 'post',
      data: JSON.stringify({
        orderNum: _this.$route.query.out_trade_no,
        tradeNo: _this.$route.query.trade_no
      }),
      headers: {
        'Content-Type': 'application/json; charset=utf-8',
        'token': _this.getToken()
      }
    }).then((response) => {
      if (response.data.code !== 1) {
        _this.isTokenExpired(_this, response.data.msg)
        this.err(response.data.msg)
      }
    })
  }
}
</script>

<style scoped>
.detail-container {
  width: 80%;
  margin: 0 auto;
}
.pay-ok{
  color: var(--them-color);
  font-size: 120px;
}
</style>
